<template>
    <div class="heart">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/company/companyInfo' }">企业</el-breadcrumb-item>
        <el-breadcrumb-item
          ><a>添加或编辑</a></el-breadcrumb-item
        >
      </el-breadcrumb>
      <el-card style="height: 70px; margin-top: 20px;" shadow="hover" :body-style="{ padding: '0px', height: '100%' }">
        <div class="headCard">
            <h1 style="margin-left: 20px">添加企业信息</h1>
            <div class="buttons">
                <el-button type="primary" style="width: 100px;" @click="addElec">添加用电设备</el-button>
                <el-button type="primary" style="width: 100px; ">添加生产线</el-button>
                <el-button type="primary" style="width: 100px; margin-right: 20px" @click="addCompany">添加企业</el-button>
            </div>
        </div>
      </el-card>
      <div class="formArea">
        <div class="row">
          <div class="inputItem">
            <span>公司名称 &nbsp;&nbsp;</span>
            <el-input v-model="information.companyName" style="width: 240px" placeholder="" />
          </div>
          <div class="inputItem">
            <span>统一社会信用代码</span>
            <el-input v-model="information.uniCode" style="width: 240px" placeholder="" />
          </div>
        </div>
        <div class="row">
          <div class="inputItem">
            <span>企业地址 &nbsp;&nbsp;</span>
            <el-input v-model="information.companyAddress" style="width: 240px" placeholder="" />
          </div>
          <div class="inputItem">
            <span>经度</span>
            <el-input v-model="information.location[0]" style="width: 200px" placeholder="" />
          </div>
          <div class="inputItem">
            <span>纬度</span>
            <el-input v-model="information.location[1]" style="width: 200px" placeholder="" />
          </div>
        </div>
        <div class="row">
          <div class="inputItem">
            <span>报警接收人</span>
            <el-input v-model="information.contactPerson" style="width: 200px" placeholder="" />
          </div>
          <div class="inputItem">
            <span>报警短信接收电话</span>
            <el-input v-model="information.contactNumber" style="width: 200px" placeholder="" />
          </div>
          <div class="inputItem">
            <span>行业</span>
            <el-input v-model="information.industry" style="width: 200px" placeholder="" />
          </div>
        </div>
        <div class="row">
            <span>内容摘要 &nbsp;&nbsp;&nbsp;&nbsp;</span>
            <el-input
              v-model="information.abstract"
              maxlength="500"
              style="width: 240px; flex-grow:1"
              placeholder=""
              show-word-limit
              :autosize="{ minRows: 10, maxRows: 15 }"
              type="textarea"
            />
        </div>
        <el-divider content-position="center">只能上传jpg/png文件，每项最多上传两张</el-divider>
        <div class="row">
          <div class="inputItem">
            <span>排污许可证</span>
            <el-upload
            v-model:file-list="fileList"
            action="http://up-z2.qiniup.com"
            list-type="picture-card"
            :on-remove="handleRemove"
            :before-upload="beforeAvatarUpload"
            :class="fileList.length < 2 ? '' : 'hid' "
            :data="qndata"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
          </div>
          <div class="inputItem">
            <span>联网备案资料</span>
            <el-upload
            v-model:file-list="fileList1"
            action="http://up-z2.qiniup.com"
            list-type="picture-card"
            :on-remove="handleRemove"
            :before-upload="beforeAvatarUpload"
            :class="fileList1.length < 2 ? '' : 'hid' "
            :data="qndata"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
          </div>
          <div class="inputItem">
            <span>企业联网报告</span>
            <el-upload
            v-model:file-list="fileList2"
            action="http://up-z2.qiniup.com"
            list-type="picture-card"
            :on-remove="handleRemove"
            :before-upload="beforeAvatarUpload"
            :class="fileList2.length < 2 ? '' : 'hid' "
            :data="qndata"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
          </div>
        </div>
        <div class="row">
          <div class="inputItem">
            <span>环评验收报告</span>
            <el-upload
            v-model:file-list="fileList3"
            action="http://up-z2.qiniup.com"
            list-type="picture-card"
            :on-remove="handleRemove"
            :before-upload="beforeAvatarUpload"
            :class="fileList3.length < 2 ? '' : 'hid' "
            :data="qndata"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
          </div>
          <div class="inputItem">
            <span>联网备案资料</span>
            <el-upload
            v-model:file-list="fileList4"
            action="http://up-z2.qiniup.com"
            list-type="picture-card"
            :on-remove="handleRemove"
            :before-upload="beforeAvatarUpload"
            :class="fileList4.length < 2 ? '' : 'hid' "
            :data="qndata"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
          </div>
          <div class="inputItem">
            <span>企业网报告类型</span>
            <el-select
            v-model="information.reportType"
            placeholder="Select"
            size="large"
            style="width: 200px"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          </div>
        </div>
      </div>
    </div>
      
  </template>
  <script lang="ts" setup>
  import { ref, watch, onMounted, reactive,  } from 'vue'
  import type { UploadProps, UploadUserFile } from 'element-plus'
  import { Plus } from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'
  import * as qiniu from 'qiniu-js'
  import http from '@/http/http'
  const information = reactive({
    companyName: '',
    uniCode:'',
    companyAddress:'',
    location: new Array(2),
    contactPerson:'',
    contactNumber:'',
    hasLine:0,
    abstract:'',
    // 排污许可证
    emissionPermit:[] as Array<String>,
    networkFiling:[] as Array<String>,
    networkReport:[] as Array<String>,
    receivingReport:[] as Array<String>,
    corporateReport:[] as Array<String>,
    reportType:'' ,
    industry:''
  })
  const fileList = ref<UploadUserFile[]>([])
  const fileList1 = ref<UploadUserFile[]>([])
  const fileList2 = ref<UploadUserFile[]>([])
  const fileList3 = ref<UploadUserFile[]>([])
  const fileList4 = ref<UploadUserFile[]>([])
  const domain = 'http://scp78067d.hn-bkt.clouddn.com/'
  const value = ref('')
  let qndata = ref({
    token:''
  })
const options = [
  {
    value: 0,
    label: '标定校对',
  },
  {
    value: 1,
    label: '停产',
  },
  {
    value: 2,
    label: '纸质报告上传',
  }
]
  const dialogImageUrl = ref('')
  const dialogVisible = ref(false)
  let getData = ()=>{
  http.get('/api/upload/token').then((res)=>{
      console.log(res);
      qndata.value = {
        token: res.data.qiniuToken
      }
  },(err)=>{
    console.log(err)
  })
  }
  getData()
  const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(fileList.value)
  }

  // const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  //   dialogImageUrl.value = uploadFile.url!
  //   dialogVisible.value = true
  // }
  const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
  }
  // let handleSuccess = (res:any,file:any)=>{
  //   console.log(res,file,fileList.value[0].response.key)
  //   information.emissionPermit.push(domain + res.key)
  // }
  // let handleSuccess1 = (res:any,file:any)=>{
  //   information.networkFiling.push(domain + res.key)
  // }
  // let handleSuccess2 = (res:any,file:any)=>{
  //   information.networkReport.push(domain + res.key)
  // }
  // let handleSuccess3 = (res:any,file:any)=>{
  //   information.receivingReport.push(domain + res.key)
  // }
  // let handleSuccess4 = (res:any,file:any)=>{
  //   information.corporateReport.push(domain + res.key)
  // }
  let getUrl = (list:any)=>{
    let res = []
    for(let i = 0; i < list.value.length; i++){
      res.push(domain + list.value[i].response.key)
    }
    return res.join(',')
  }
  const addCompany = ()=>{
    http.post('/api/company/insert',{
      comName: information.companyName,
      comCode: information.uniCode,
      comAddress: information.companyAddress,
      comLocation: information.location.join(','),
      comContacts: information.contactPerson,
      comNumber: information.contactNumber,
      comIndustry: information.industry,
      comDescription: information.abstract,
      // 排污许可证
      comPermit: getUrl(fileList),
      // 联网备案资料
      comNetData:getUrl(fileList1),
      // 企业联网报告
      comNetRep:getUrl(fileList2),
      // 环评验收
      comRecRep:getUrl(fileList3),
      // 企业报告
      comReport:getUrl(fileList4),
      // 联网报告类型
      comRepType: information.reportType
    }).then((res)=>{
      console.log(res)
      if(res.data.code<300){
        ElMessage.success(res.data.msg)
      }else{
        ElMessage.error(res.data.msg)
      }
    },(err)=>{
      console.log(err)
    })
  }
  const addElec = ()=>{
    console.log(fileList)
  }
  const handleSelect = (v:any)=>{
    console.log(v)
  }
  </script>
  <style scoped>
    .heart{
      width: 95%;
      margin: 20px auto;
    }
    .search{
      margin-top: 50px;
      display: flex;
      justify-content: space-around;
    }
    .pagination{
      margin-top: 40px;
      display: flex;
      justify-content: center;
    }
    .el-card__body{
        padding: 0 !important;
    }
    .headCard {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .formArea{
      width: 80%;
      margin: 0 auto;
    }
    .row{
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
    }
    .inputItem{
      
    }
    .inputItem span{
      margin-right: 10px;
    }
  ::v-deep .hid .el-upload--picture-card{
      display:none;   /* 上传按钮隐藏 */
    }
  </style>